<template>
    <div class="progress-circle">
      <!--viewbox是从左上角的开始0 0 100 100-->
      <svg
        :width="radius"
        :height="radius"
        viewBox="0 0 100 100"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
      >
        <!--内层圆,r是半径，cx和cy是圆心坐标-->
        <circle
          class="progress-background"
          r="50"
          cx="50"
          cy="50"
          fill="transparent"
        ></circle>
        <!--外层圆，dashArray是描边（中间层），dashOffset是偏移量-->
        <circle
          class="progress-bar"
          r="50"
          cx="50"
          cy="50"
          fill="transparent"
          :stroke-dasharray="dashArray"
          :stroke-dashoffset="dashOffset"
        ></circle>
      </svg>
      <slot></slot>
    </div>
</template>

<script>
export default {
  name: 'progress-circle',
  props: {
    radius: {
      type: Number,
      default: 100
    },
    percent: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      dashArray: Math.PI * 100
    }
  },
  computed: {
    dashOffset () {
      return (1 - this.percent) * this.dashArray
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable"
  .progress-circle
    position: relative
    circle
      stroke-width: 8px
      transform-origin: center
      &.progress-background
        transform: scale(0.9)
        stroke: $color-theme-d
      &.progress-bar
        transform: scale(0.9) rotate(-90deg)
        stroke: $color-theme
</style>
